---
import Logo from "./Logo.astro"
import ThemeToggle from "./ThemeToggle.astro"
export const prerender = true
---

<header class="sticky top--100px z-99 px-2em">
  <div class="w-100px h-100px logo">
    <Logo />
  </div>
  <div class="flex justify-between items-center">
    <div
      class="flex items-center mt-2 pb-2 text-2xl title cursor-pointer"
      onclick="scrollToTop()"
    >
      <span
        class="text-transparent font-extrabold bg-clip-text bg-gradient-to-r dark:from-yellow-300 from-yellow-600 dark:to-red-700 to-red-700 mr-1"
        >AI聊天</span
      >
      <span class="ml-1 font-extrabold text-slate-7 dark:text-slate"
        >微蓝AI</span
      >
    </div>
    <ThemeToggle />
  </div>
</header>

<script is:inline>
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    })
  }
</script>

<style is:inline>
  .after .title,
  .after #themeToggle,
  .after .logo,
  .after #message-container {
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
  }

  .before .logo {
    transform: translate3D(25px, 150px, 0) scale(2);
  }

  .before #themeToggle {
    transform: translate3D(0, 200px, 0) rotate(540deg);
  }

  .before .title,
  .before #message-container {
    transform: translate3D(0, 200px, 0);
  }

  .before #themeToggle,
  .before #message-container {
    opacity: 0;
  }

  #themeToggle {
    border: 0;
    opacity: 1;
  }
  .after #message-container {
    opacity: 1;
  }
</style>
